<!DOCTYPE HTML>
<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<html>
<head>
  <title>Request</title>
  <link rel="stylesheet" href="css/style.css" type="text/css">
  <link rel="stylesheet" href="css/request.css" type="text/css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.min.css" type="text/css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />

  <script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
  <script src="js/request.js"></script>
</head>
<body>
<ul id="nav">
  <li><a href="request.html">Request</a></li>
  <li><a href="result.html">Result</a></li>
  <li><a href="#">About</a></li>
</ul>

<div class="container-fluid">
  <h3>Send a new Saga Request</h3>
  <div class="row">
    <div class="col-sm-8"></div>
    <div class="row">
      <div class="col-sm-2">
        <h4>Text <input type="checkbox" id="text-switch"></h4>
      </div>
      <div class="col-sm-1">
        <button id="reset" type="button" class="btn btn-secondary btn-lg">Reset</button>
      </div>
    </div>

    <div id="view-content">
      <form>
        <div class="form-row col-lg-12">
          <div class="form-group col-lg-12">
            <div class="col-lg-1">
              <label for="policyName">Policy</label>
            </div>
            <div class="col-lg-2">
              <select id="policyName" class="form-control">
                <option selected>BackwardRecovery</option>
                <option>ForwardRecovery</option>
              </select>
            </div>
          </div>
          <div class="form-group col-lg-12">
            <div class="col-lg-1">
              <label for="policyName">Requests</label>
            </div>
            <div class="col-lg-2">
              <button type="button" class="btn btn-primary" id="addRequest">Add a new request</button>
              <div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aira-labelledby="requestModalLabel"
                   aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h4 class="modal-title" id="requestModalLabel">New request</h4>
                    </div>
                    <div class="modal-body">
                      <form>
                        <div class="form-group row">
                          <label for="id" class="col-sm-3 col-form-label">ID</label>
                          <div class="col-sm-9">
                            <input type="text" class="form-control" id="id">
                          </div>
                        </div>
                        <div class="form-group row">
                          <label for="type" class="col-sm-3 col-form-label">Type</label>
                          <div class="col-sm-9">
                            <select id="type" class="form-control">
                              <option value="rest" selected>rest</option>
                              <option value="NOP">NOP</option>
                            </select>
                          </div>
                        </div>
                        <div class="form-group row">
                          <label for="service-name" class="col-sm-3 col-form-label">Service Name</label>
                          <div class="col-sm-9">
                            <input type="text" class="form-control" id="service-name">
                          </div>
                        </div>
                        <h4>Transaction:</h4>
                        <div class="form-group row">
                          <label for="transaction-method" class="col-sm-3 col-form-label">Method</label>
                          <div class="col-sm-9">
                            <select id="transaction-method" class="form-control">
                              <option value="put" selected>put</option>
                              <option value="post">post</option>
                              <option value="get">get</option>
                              <option value="delete">delete</option>
                            </select>
                          </div>
                        </div>
                        <div class="form-group row">
                          <label for="transaction-path" class="col-sm-3 col-form-label">Path</label>
                          <div class="col-sm-9">
                            <input type="text" class="form-control" id="transaction-path">
                          </div>
                        </div>
                        <div class="form-group row">
                          <label for="transaction-params-btn" class="col-sm-3 col-form-label">Params</label>
                          <div class="col-sm-9">
                            <button type="button" class="btn btn-primary" id="transaction-new-query-btn">Add query
                              data
                            </button>
                            <button type="button" class="btn btn-primary" id="transaction-new-form-btn">Add form data
                            </button>
                            <button type="button" class="btn btn-primary" id="transaction-new-json-btn">Add json body
                            </button>
                          </div>
                        </div>
                        <table class="table" id="transaction-params">
                        </table>
                        <div class="form-group" id="transaction-params-json-div" hidden>
                          <label for="transaction-params-json">json</label>
                          <textarea class="form-control" rows="5" id="transaction-params-json"></textarea>
                        </div>
                        <h4>Compensation:</h4>
                        <div class="form-group row">
                          <label for="compensation-method" class="col-sm-3 col-form-label">Method</label>
                          <div class="col-sm-9">
                            <select id="compensation-method" class="form-control">
                              <option value="post" selected>post</option>
                              <option value="put">put</option>
                              <option value="get">get</option>
                              <option value="delete">delete</option>
                            </select>
                          </div>
                        </div>
                        <div class="form-group row">
                          <label for="compensation-path" class="col-sm-3 col-form-label">Path</label>
                          <div class="col-sm-9">
                            <input type="text" class="form-control" id="compensation-path">
                          </div>
                        </div>
                        <div class="form-group row">
                          <label for="compensation-params-btn" class="col-sm-3 col-form-label">Params</label>
                          <div class="col-sm-9">
                            <button type="button" class="btn btn-primary" id="compensation-new-query-btn">Add query
                              data
                            </button>
                            <button type="button" class="btn btn-primary" id="compensation-new-form-btn">Add form data
                            </button>
                            <button type="button" class="btn btn-primary" id="compensation-new-json-btn">Add json body
                            </button>
                          </div>
                        </div>
                        <table class="table" id="compensation-params">
                        </table>
                        <div class="form-group" id="compensation-params-json-div" hidden>
                          <label for="compensation-params-json">json</label>
                          <textarea class="form-control" rows="5" id="compensation-params-json"></textarea>
                        </div>
                        <div class="form-group row">
                          <label for="parents-btn" class="h4 col-sm-3 col-form-label">Parents:</label>
                          <div class="col-sm-9">
                            <select id="parents" multiple="multiple">
                            </select>
                            <!-- <button type="button" class="btn btn-primary" id="parents-btn">Add a parent</button> -->
                          </div>
                        </div>
                        <!-- <table class="table" id="parents"> -->
                        <!-- </table> -->
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary" id="saveRequest">Save</button>
                    </div>
      </form>
    </div>
  </div>
</div>
</div>
</div>
</div>
<table class="table" id="requests">
  <thead>
  <th>Id</th>
  <th>Type</th>
  <th>Service Name</th>
  <th>View</th>
  <th>Remove</th>
  </thead>
</table>
</div>
</form>
</div>

<div id="text-content" hidden>
  <textarea id="content" style="width:800px;height:600px;"></textarea>
</div>

<br>
<div id="v_loading" class="loading" style="display:none;"><span></span></div>

<form>
  <div class="form-row col-lg-12">
    <div class="form-row col-lg-4 col-md-8">
      <div class="input-group">
        <input id="submit-url" type="url" class="form-control" value="/saga-service/requests">
        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button" id="send-request">Submit</button>
                        </span>
      </div>
    </div>
  </div>
</form>
</div>
</div>
</body>
</html>
